<template>
	<button class="message-btn f-fz14 f-fc-red f-bdr-scircle" :disabled="sendMessageSec !== 0" @tap="sendMessage">{{ sendMessageSec !== 0 ? `${sendMessageSec}s` : '获取验证码' }}</button>
</template>

<script>
import form from '../../util/form.js'
export default {
	props: {
		phone: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			sendMessageSec: 0
		};
	},
	methods: {
		sendMessage() {
			const that = this;
			let rule = [
				{
					name: 'phone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号', '请输入正确的手机号']
				}
			];
			let errMsg = form.validation({ phone: that.phone }, rule);
			if (errMsg) {
				uni.showToast({
					icon: 'none',
					title: errMsg
				});
				return;
			}
			that.sendMessageSec = 60;
			let time = setInterval(() => {
				that.sendMessageSec--;
				if (that.sendMessageSec === 0) {
					clearInterval(time);
				}
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.message-btn {
	width: 192rpx;
	height: 62rpx;
	line-height: 62rpx;
	background-color: #fff;
	padding: 0 22rpx;
	border: 2rpx solid $uni-text-color-red;
}
.message-btn[disabled] {
	color: $uni-text-color-red;
}
</style>
